<template>
  <div class="certificate-container">
    <div class="main-info-title fs18 flex flex-row-center">
      <span>证书列表</span>
      <el-button type="primary" style="margin-left: auto" @click="addNews">
        新建证书
      </el-button>
    </div>
    <HHsearch
      ref="search"
      :search-options="searchOptions"
      :btn-option="1"
      @search="search"
      @reset="reset"
    ></HHsearch>
    <HHtable
      ref="table"
      :border="true"
      :total="total"
      :height="400"
      :table-column="tableColumn"
      :table-data="tableData"
      @page-click="pageClick"
    ></HHtable>
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogTableVisible"
      width="700px"
      :lock-scroll="false"
      @closed="handleDialogClose"
    >
      <el-form
        ref="form"
        :model="form"
        label-width="80px"
        :rules="rules"
        label-position="left"
      >
        <el-form-item label="证书名称" prop="certificateName">
          <el-input
            v-model="form.certificateName"
            placeholder="请输入证书名称"
            maxlength="20"
          ></el-input>
        </el-form-item>
        <el-form-item label="类别" prop="certificateTypeName">
          <el-input
            v-model="form.certificateTypeName"
            placeholder="请输入类别"
            maxlength="20"
          ></el-input>
        </el-form-item>
      </el-form>
      <div class="btn-container flex flex-center">
        <el-button type="primary" @click="saveCertificateInfo">保存</el-button>
        <el-button @click="handleDialogClose">返回</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import HHsearch from '@/components/HH-search'
  import HHtable from '@/components/HH-table'
  import { getCertificateList, addCertificate } from '@/api/certificate'
  export default {
    components: {
      HHsearch,
      HHtable,
    },
    data() {
      return {
        total: 500,
        dialogTableVisible: false,
        dialogTitle: '新建证书',
        form: {
          certificateName: '',
          certificateTypeName: '',
        },
        params: {
          pageNum: 1,
          pageSize: 10,
          certificateName: '',
          certificateTypeName: '',
        },
        rules: {
          certificateName: [
            { required: true, message: '请输入证书名称', trigger: 'blur' },
          ],
          certificateTypeName: [
            { required: true, message: '请输入类别', trigger: 'blur' },
          ],
        },
        tableColumn: [
          {
            prop: 'certificateTypeName',
            label: '类别',
          },
          {
            prop: 'certificateName',
            label: '证书名称',
          },
        ],
        tableData: [],
        searchOptions: [
          {
            type: 'text',
            prop: 'certificateTypeName',
            label: '类别：',
            span: 5,
            placeholder: '请输入搜索',
          },
          {
            type: 'text',
            prop: 'certificateName',
            span: 6,
            label: '证书名称：',
            placeholder: '请输入搜索',
          },
        ],
      }
    },
    mounted() {
      this.initData()
    },
    methods: {
      initData() {
        this.getCertificateList()
      },
      getCertificateList() {
        this.$refs.table.loading = true
        getCertificateList(this.params).then((res) => {
          if (res.code === 200) {
            this.total = res.data.total
            this.tableData = res.data.result
            setTimeout(() => {
              this.$refs.table.loading = false
            }, 1000)
          } else {
            this.$refs.table.loading = false
          }
        })
      },
      addNews() {
        this.dialogTitle = '新建证书'
        this.form = {
          certificateName: '',
          certificateTypeName: '',
        }
        setTimeout(() => {
          this.dialogTableVisible = true
        }, 200)
      },
      handleDialogClose() {
        this.$refs.form.resetFields() // 重置表单校验
        this.dialogTableVisible = false
      },
      search(res) {
        const arr = Object.keys(res)
        for (let i = 0; i < arr.length; i++) {
          this.params[arr[i]] = res[arr[i]]
        }
        this.initData()
      },
      reset() {
        this.params = {
          pageNum: 1,
          pageSize: 10,
          certificateName: '',
          certificateTypeName: '',
        }
        this.$refs.search.removeFilterArray()
        this.initData()
      },
      pageClick(pager) {
        this.params.pageNum = pager
        this.initData()
      },
      saveCertificateInfo() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.form.certificateTypeId = 0
            addCertificate(this.form).then((res) => {
              if (res.code === 200) {
                this.dialogTableVisible = false
                this.$baseMessage('添加成功', 'success')
                this.initData()
              } else {
                this.$baseMessage('添加失败', 'error')
              }
            })
          }
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
  @import '../../../assets/styles/common.css';
  .certificate-container {
    .main-info-title {
      position: relative;
      height: 60px;
      margin-bottom: 20px;
      border-bottom: 1px solid #eee;

      &:after {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 80px;
        height: 3px;
        content: '';
        background-color: #409eff;
        border-radius: 3px;
        transition: all 0.5s ease;
      }

      &:hover:after {
        width: 120px;
      }
    }
  }
</style>
